<template>
	<view style="	background-color: #f4f4f4;">
		<page-head title="swiper,可滑动视图"></page-head>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="http://img.aiimg.com/uploads/allimg/141023/1-141023233117.jpg" mode="widthFix"></image>
					</view>
					
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="http://img.aiimg.com/uploads/allimg/181014/1-1Q014232644.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="http://pic35.photophoto.cn/20150507/0018032120352511_b.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			
		</view>
		<marquee>公告：6月20号开始下单，截止时间为8月10号；请各位家长查到需要采购的园服进行下单！！！...</marquee>
				
		<view class="shop-div">
			<view class="text-tuijian">新品上架</view>
			<view class="shop-list0">
				
				<view v-for="(item, index) in goodsList" class="goods-item-wrap" @click="toGoods(item.goodsId)">
					<image :src="item.goodsLogo" class="goods-image" />
				
					<view class="goods-content-wrap">
						<view class="goods-name">【{{ item.goodsSn }}】{{ item.goodsName }}</view>
				
						<view class="goods-stock-wrap">
							<view class="goods-stock">库存 : {{ item.storeCount }}</view>
							<view class="goods-sell-count">浏览量 : {{ item.clickCount }}</view>
						</view>
				
						<view class="goods-price">
						<view class="shop-title3">
							
							<view class="shop-title-text">
								￥{{ item.marketPrice }}
							</view>
							<view class="shop-title-img">
								<image src="../../../static/images/shoping.png" align="right"  class="shop-title-img"   ></image>
							</view>
						</view>
						</view>
						
				
						
					</view>
				</view>
			</view>
		</view>
		<view class="content-list">
			<view class="text-tuijian">商家推荐</view>
			<view class="goods-item" v-for="(item, key) in goodsDefault" :key="key"   @click="toGoods(item.goodsId)" >
				<image :src="item.goodsLogo" ></image>
				<view class="goods-item-content">
					<view class="goods-title text-line-hide">{{item.goodsName}}</view>
					<view class="goods-little-title gary-font text-line-hide">{{item.littleTitle}}</view>
					<view class="goods-amount">
						<text space="emsp">￥{{item.marketPrice}}</text>
						<view class="gary-font text-line-hide">库存 : {{item.storeCount}}</view>
					</view>
					<view class="goods-label"><rich-text :nodes="item.storeCount"></rich-text></view>
				</view>
			</view>
		</view>

		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 600,
				goodsList: [{
				
						goodsId: 1,
						status: 1,
						storeCount: 999,
						clickCount: 1,
						goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/e8f761987bebf25f31114c784d15703e.png",
						goodsName: "【小编严选】小程序sketch ui 电商设计稿",
						marketPrice: 9.99
					},
					{
						goodsId: 2,
						status: 1,
						storeCount: 999,
						clickCount: 1,
						goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
						goodsName: "【小编严选】Sketch + PS WEB后台管理源文件",
						marketPrice: 9.99
					}
				],
				goodsDefault:[
							{
								goodsId: 2,
								status: 1,
								storeCount: 999,
								clickCount: 1,
								goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
								goodsName: "【小编严选】Sketch + PS WEB后台管理源文件",
								marketPrice: 9.99
							},
							{
								goodsId: 1,
								status: 1,
								storeCount: 999,
								clickCount: 1,
								goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/e8f761987bebf25f31114c784d15703e.png",
								goodsName: "【小编严选】小程序sketch ui 电商设计稿",
								marketPrice: 9.99
							}
						]
				
			}
			
		},
		onLoad() {
			this.request({
					url: 'shop/getMallGoodsIs',
					method: 'POST',
					}).then(res => {
						console.log(res)
						this.goodsList=res.data.goodsNewList
						this.goodsDefault=res.data.goodsRecommendList
					})
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			},
			//点击用户足迹
			toGoods(goodsId){
				//uni.showToast({title: "啊实打实的"});
			uni.navigateTo({
				url:'/pages/shop/shop_list/goods-detail?goodid='+goodsId
			})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	        
	.uni-margin-wrap {
		width:5000rpx;
		width: 100%;
		
		
	}
	.swiper {
		width: 100%;
		height: 390rpx;
		
	}
	.swiper-item {
		display: block;
		height: 350rpx;
		line-height: 350rpx;
		text-align: center;
		image{
			width: 100%;
			height: 100%;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		}
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt{
		margin-top:60rpx;
		position:relative;
	}

	.info {
		position: absolute;
		right:20rpx;
	}

    .uni-padding-wrap {
        width:550rpx;
        padding:0 100rpx;
    }
	
	.shop-div{
		width: 95%;
		//height: 100px;
		margin: 0 auto;
		//background-color: #40a3ff;
		border-radius: 8px;
	}
	.text-tuijian{
		display: block;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		color: #AF1A1D;
		font-size: 20px;
		font-family: sans-serif;
		font-weight: bold;
		text-align: center;
	//	border-bottom:1px solid #565656;
		margin-bottom: 10px;
		border-bottom: 3mm ridge rgba(220, 110, 112, 0.6);
		//background-color: #565656;
	}
	.shop-list0{
		display: block;
		width: 100%;
		//background-color: #303f56;
	}
	.shop-list1{
		display: flex;
		width: 100%;
		height: 120px;
		margin-top: 12px;
		background-color: rgb(249, 249, 253);;
		border-radius: 8px;
		//border: 1px solid #40a3ff;
		
		// box-shadow: 3px 4px 4px 4px #c6c9cf;
		//background-color: #303f56;
	}
	.pic{
		width: 230rpx;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.shop-title{
		margin-left: 10px;
		width: 65%;
		height: 100%;
		//background-color: #ffffff;
		background-color: #303f56;
	}
	.shop-title1{
		height: 50%;
		padding-top: 5px;
		background-color: #ffffff;
		//background-color: #303f56;
	}
	.shop-title2{
			height: 20%;
			color:#b10000 ;
			font-weight: bold;
			background-color: #ffffff;
			//background-color: #235626;
	}
	.shop-title3{
		display: flex;
		height: 30%;
		font-size: 13px;
		vertical-align: bottom;
		//background-color: #412a56;
		image{
			width: 33px;
			height: 33px;
		}
	}
	.shop-title-text{
		width: 80%;
		background-color: #ffffff;
	}
	.shop-title-img{
		background-color: #ffffff;
		width: 20%;
		height: 100%;
		float: right;
		text-align: right;
		//background-color: #412a56;
		
	}
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}
	
	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}
	
	.goods-content-wrap {
		padding-left: 24rpx;
	}
	
	.goods-option {
		display: flex;
	}
	
	.goods-option-item {
		background: #f4f4f6;
	}
	
	.goods-image {
		width: 190rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}
	
	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}
	
	.goods-stock {
		margin-right: 24rpx;
	}
	
	.goods-price {
		font-size: 48rpx;
		color: #AF1A1D;
		margin-top: 24rpx;
	}
	
	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}
	
	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}
	
	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}
	
	.goods-item-wrap {
		margin-top: 24rpx;
	}
	
	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}
	
	
	
	
	
	.goods-header-item {
		margin-right: 24rpx;
	}
	
	
	
	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	.shop-title3{
		display: flex;
		height: 30%;
		font-size: 45rpx;
		vertical-align: bottom;
		//background-color: #412a56;
		image{
			width: 33px;
			height: 33px;
		}
	}
	.shop-title-text{
		width: 80%;
		background-color: #ffffff;
	}
	.shop-title-img{
		/* background-color: #ffffff; */
		width:35px;
		height: 35px;
	}
	
	///=======================   商品小卡片  begin  ==========
	.content-list {
		width: 100%;
		margin: 0 19rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.goods-item {
		background-color: #ffffff;
		width: 347.5rpx;
		border-radius: 19rpx;
		margin: 0 19rpx 19rpx 0;
	}
	.goods-item image {
		width: 100%;
		height: 308rpx;
		border-radius: 19rpx 19rpx 0 0;
	}
	.goods-item-content {
		padding: 19rpx;
	}
	.goods-little-title {
		padding: 10rpx 0;
	}
	.goods-title {
		font-weight: bold;
	}
	.goods-amount {
		display: flex;
		align-items: baseline;
	}
	.goods-amount text {
		color: #AF1A1D;
		font-size: 40rpx;
	}
	.goods-amount view {
		margin-left: 22rpx;
	}
	.goods-label {
		padding: 10rpx 0 0;
	}
	.gary-font {
		color: #999;
		font-size: 22rpx;
	}
	.text-line-hide {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	////  =================== 商品小卡片  end ==========
</style>
